<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript">
            var vector = new Array (10,100,120);
            function draw(){
                var canvas = document.getElementById('grafica');
                if (canvas.getContext){
                    var ctx = canvas.getContext('2d');
                    
                    // ejes
                    ctx.fillRect(10,10,1,180);
                    ctx.fillRect(10,190,180,1);

                  ctx.fillStyle = 'red';
                  ctx.shadowBlur = 10;
                  ctx.shadowColor = 'blue';
                  ctx.shadowOffsetY = 1;
                  ctx.shadowOffsetX = 4;
                    
                    // dibujar barras
                    for(var i = 1;i<=vector.length;i++)
                    {
                      ctx.fillRect(20*i + 10,190-vector[i-1],5,vector[i-1]);
                    }
                }
            }
        </script>
        <style type="text/css">
            canvas { border: 1px solid black; }
        </style>
    </head>
    <body onload="draw();">
     <a href="test1.html">test1</a>
    <canvas id="grafica" width="200" height="200">No soporta canvas</canvas>
    
</body>
</html>
